<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏房间</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_room.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <div class="container">
        <div id="chess_area">
            <!-- 棋盘区域, 需要基于 canvas 进行实现 -->
            <canvas id="chess" width="450px" height="450px"></canvas>
            <!-- 显示当前回合状态 -->
            <div id="screen"> 等待玩家连接中... </div>
        </div>
        <div id="chat_area" width="400px" height="300px">
            <div id="chat_show">
                <p id="self_msg">你好！</p></br>
                <p id="peer_msg">你好！</p></br>
                <p id="peer_msg">leihoua~</p></br>
            </div>
            <div id="msg_show">
                <input type="text" id="chat_input">
                <button id="chat_button">发送</button>
            </div>
        </div>
    </div>
    <script>
        let chessBoard = []; // 15x15的二维数组，记录棋盘状态
        let BOARD_ROW_AND_COL = 15; // 棋盘行列数
        let chess = document.getElementById('chess');
        let context = chess.getContext('2d'); // 获取canvas的2D绘图上下文

        var ws_url = "ws://" + location.host + "/room"; // WebSocket连接地址
        var ws_hdl = new WebSocket(ws_url); // WebSocket连接对象

        var room_info = null; // 保存房间信息（房间ID、玩家ID等）
        var is_me; // 标记当前是否轮到自己走棋

        /**
         * 初始化游戏：绘制棋盘和背景
         */
        function initGame() {
            initBoard(); // 初始化棋盘数组
            context.strokeStyle = "#BFBFBF"; // 设置棋盘线颜色
            
            // 加载背景图片
            let logo = new Image();
            logo.src = "image/sky.jpeg";
            logo.onload = function () {
                context.drawImage(logo, 0, 0, 450, 450); // 绘制背景
                drawChessBoard(); // 绘制棋盘网格
            }
        }

        /**
         * 初始化棋盘数组（全部置0表示空位）
         */
        function initBoard() {
            for (let i = 0; i < BOARD_ROW_AND_COL; i++) {
                chessBoard[i] = [];
                for (let j = 0; j < BOARD_ROW_AND_COL; j++) {
                    chessBoard[i][j] = 0; // 0表示空，1表示黑棋，2表示白棋（根据实际需求调整）
                }
            }
        }

        /**
         * 绘制15x15的棋盘网格线
         */
        function drawChessBoard() {
            for (let i = 0; i < BOARD_ROW_AND_COL; i++) {
                // 画横线
                context.moveTo(15 + i * 30, 15);
                context.lineTo(15 + i * 30, 435);
                context.stroke();
                // 画竖线
                context.moveTo(15, 15 + i * 30);
                context.lineTo(435, 15 + i * 30);
                context.stroke();
            }
        }

        /**
         * 在指定位置绘制棋子
         * @param {number} i - 列坐标（0-14）
         * @param {number} j - 行坐标（0-14）
         * @param {boolean} isWhite - 是否为白棋
         */
        function oneStep(i, j, isWhite) {
            if (i < 0 || j < 0) return;
            context.beginPath();
            context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); // 画圆
            context.closePath();
            
            // 创建渐变效果（增强棋子立体感）
            var gradient = context.createRadialGradient(
                15 + i * 30 + 2, 15 + j * 30 - 2, 13,
                15 + i * 30 + 2, 15 + j * 30 - 2, 0
            );
            
            // 根据棋子颜色设置渐变
            if (!isWhite) {
                gradient.addColorStop(0, "#0A0A0A"); // 黑棋
                gradient.addColorStop(1, "#636766");
            } else {
                gradient.addColorStop(0, "#D1D1D1"); // 白棋
                gradient.addColorStop(1, "#F9F9F9");
            }
            
            context.fillStyle = gradient;
            context.fill();
        }

        // 棋盘点击事件：处理玩家走棋
        chess.onclick = function (e) {
            if (!is_me) {
                alert("等待对方走棋....");
                return;
            }
            
            // 计算点击位置对应的棋盘坐标
            let x = e.offsetX;
            let y = e.offsetY;
            let col = Math.floor(x / 30); // 列
            let row = Math.floor(y / 30); // 行
            
            if (chessBoard[row][col] != 0) {
                alert("当前位置已有棋子！");
                return;
            }
            
            send_chess(row, col); // 发送走棋请求
        };

        /**
         * 发送走棋请求到服务器
         * @param {number} r - 行坐标
         * @param {number} c - 列坐标
         */
        function send_chess(r, c) {
            var chess_info = {
                optype: "put_chess",
                room_id: room_info.room_id,
                uid: room_info.uid,
                row: r,
                col: c
            };
            ws_hdl.send(JSON.stringify(chess_info));
        }

        // 页面关闭前关闭WebSocket连接
        window.onbeforeunload = function() {
            ws_hdl.close();
        };

        // WebSocket事件处理
        ws_hdl.onopen = function() {
            console.log("房间长连接建立成功");
        };
        
        ws_hdl.onclose = function() {
            console.log("房间长连接断开");
        };
        
        ws_hdl.onerror = function() {
            console.log("房间长连接出错");
        };

        /**
         * 更新界面提示信息（轮到谁走棋）
         * @param {boolean} me - 是否轮到自己
         */
        function set_screen(me) {
            var screen_div = document.getElementById("screen");
            screen_div.innerHTML = me ? "轮到己方走棋..." : "轮到对方走棋...";
        }

        // 处理服务器消息
        ws_hdl.onmessage = function(evt) {
            var info = JSON.parse(evt.data);
            console.log("收到消息:", info);
            
            // 1. 房间准备就绪
            if (info.optype == "room_ready") {
                room_info = info;
                // 修正问题1：黑棋(black_id)先手
                is_me = (room_info.uid == room_info.black_id); // 自己是黑棋则先手
                set_screen(is_me);
                initGame();
            } 
            // 2. 处理走棋消息
            else if (info.optype == "put_chess") {
                if (info.result == false) {
                    alert(info.reason);
                    return;
                }
                
                // 修正问题2：更新回合提示
                // 如果当前下棋的是对方，则下一手轮到自己
                is_me = (info.uid != room_info.uid);
                set_screen(is_me);
                
                // 绘制棋子（根据下棋者身份决定颜色）
                var isWhite = (info.uid == room_info.white_id);
                if (info.row != -1 && info.col != -1) {
                    oneStep(info.col, info.row, isWhite);
                    chessBoard[info.row][info.col] = isWhite ? 2 : 1; // 更新棋盘状态
                }
                
                // 处理游戏结束
                if (info.winner != 0) {
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = (room_info.uid == info.winner) ? "你赢了！" : "你输了";
                    
                    // 添加返回大厅按钮
                    var button_div = document.createElement("div");
                    button_div.innerHTML = "返回大厅";
                    button_div.onclick = function() {
                        ws_hdl.close();
                        location.replace("/game_hall.html");
                    };
                    document.getElementById("chess_area").appendChild(button_div);
                }
            } 
            // 3. 处理聊天消息
            else if (info.optype == "chat") {
                if (info.result == false) {
                    alert(info.reason);
                    return;
                }
                
                var msg_div = document.createElement("p");
                msg_div.innerHTML = info.message;
                msg_div.setAttribute("id", info.uid == room_info.uid ? "self_msg" : "peer_msg");
                
                var chat_show_div = document.getElementById("chat_show");
                chat_show_div.appendChild(msg_div);
                chat_show_div.appendChild(document.createElement("br"));
                
                document.getElementById("chat_input").value = ""; // 清空输入框
            }
        };

        // 聊天发送按钮事件
        document.getElementById("chat_button").onclick = function() {
            var send_msg = {
                optype: "chat",
                room_id: room_info.room_id,
                uid: room_info.uid,
                message: document.getElementById("chat_input").value
            };
            ws_hdl.send(JSON.stringify(send_msg));
        };
    </script>
</body>
</html>